<template>
  <div class="gift-wrap">
    <el-form ref="model" :model="model" label-width="80px" v-loading="loading">
      <el-form-item label="商品封面">
        <el-upload
          class="avatar-uploader"
          action="/api/store/admin/official/avatar/"
          :data="sendData"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="onloadAvatar"
        >
          <img v-if="avatar" :src="avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="名称">
        <el-input placeholder="请输入名称" v-model="model.title"></el-input>
      </el-form-item>
      <el-form-item label="价格">
        <el-input placeholder="请输入数字" v-model.number="model.price"></el-input>
      </el-form-item>
      <el-form-item label="数量">
        <el-input placeholder="请输入数字" v-model.number="model.number"></el-input>
      </el-form-item>
       <el-form-item label="状态">
       <el-switch
        v-model="model.status"
        active-text=" 启用"
        inactive-text="禁用">
      </el-switch>
      </el-form-item>
      <el-form-item label="内容">
        <tinymce v-model="model.content">
        </tinymce>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import tinymce from "../../../components/tinymce"
export default {
  props:{
    data:{
      type: Object
    }
  },
  name: 'gift',
  data() {
    return {
      model:{
        status: true
      },
      sendData: {},
      avatar:null,
      loading: false
    }
  },
  components:{
    tinymce
  },
  methods:{
    async save(){
      const url = this.data ? `/api/store/admin/tera/edit/${this.data.id}` : `/api/store/admin/tera/create`;
      const res = await this.$post(url,this.model)
      this.$message({type:'success',message:res.message});
      this.$router.push('/store/gift/list')
    },
    onloadAvatar(file){
      const isJPG = file.type === 'image/jpeg' || 'image/png';
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG png 格式!');
      }
      this.loading = true;
      return isJPG;
    },
    handleAvatarSuccess(result) {
      this.avatar = result.data;
      this.model.avatar = result.data;
      this.loading = false;
      this.$message({type:'success',message:result.message})
    },
    initEdit(){
      this.model = { ...this.data };
      this.avatar = this.data.avatar;
    }
  },
  created(){
    this.sendData = {
      token:sessionStorage.getItem('accessToken')
    };
    this.data && this.initEdit();
  }
}
</script>
<style lang="less" scoped>
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px !important;
  text-align: center;
  border: 1px dashed #ccc;
}
</style>
